<template>
  <div v-loading="loading" class="ChangePassword_container add_container">
    <div class="main_main">

      <el-form ref="dataForm" :inline="true" :model="formData" size="mini" :rules="rules">
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="phone" disabled />
        </el-form-item>
        <el-form-item label="验证码" prop="code">

          <div class="login_container_right_main_input2">
            <el-input v-model="formData.code" placeholder="请输入" />
            <a v-if="leftSecond==0" class="login_container_right_main_input2_getCode canClick" @click="sendVerify">发送验证码</a>
            <div v-else class="login_container_right_main_input2_getCode">{{ leftSecond }} 秒后重新发送</div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="submitForm()">确定</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { sendPhoneCode } from '@/api/common/login'

import { renew } from '@/api/common/systemSet'
// api方法
export default {
  name: 'InitCompanyData',
  props: {
    layerid: {},
    id: {},
    defaultValue: {}
  },
  data() {
    return {
      loading: false,
      formData: {
        loginPhone: '',
        originalPassword: '',
        newPassword: '',
        repeatNewPassword: ''
      },
      leftSecond: 0,
      timer: undefined,
      rules: {
        code: [
          { required: true, message: '验证码不能为空', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'userId', 'userName', 'phone'
    ])
  },
  methods: {
    sendVerify() {
      if (this.leftSecond !== 0) {
        return
      }
      sendPhoneCode({ phone: this.phone }).then(res => {
        if (res) {
          this.startTimer()
        }
      })
    },
    startTimer() { // 开始定时器
      this.leftSecond = 60
      this.timer = setInterval(() => {
        this.leftSecond--
        if (this.leftSecond == 0) {
          this.stopTimer()
        }
      }, 1000)
    },
    stopTimer() { // 关闭定时器
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    submitForm() {
      const _this = this
      _this.$refs['dataForm'].validate(function(valid) {
        if (valid) { // 表单校验通过
          _this.formData.userId = _this.userId
          const json = {
            code: _this.formData.code,
            phone: _this.phone
          }
          _this.loading = true
          renew(json).then(res => {
            _this.$message({
              message: res.msg,
              type: 'success'
            })
            _this.$layer.close(_this.layerid)// 关闭弹框

            // 初始化成功之后，退出登录
            setTimeout(() => {
              _this.logout()
            }, 1500)
          }).finally(() => {
            _this.loading = false
          })
        }
      })
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login`)
      location.reload()
    },

    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>
<style lang="less" scoped>
.ChangePassword_container{
  width: 100%;
  height: 100%;
  display: flex;flex-direction: column;justify-content: space-between;

  .login_container_right_main_input2 {
    display: flex;
    align-items: center;
    /deep/ .el-input__inner {
      //border-radius: 8px;background-color: transparent;
    }
    .login_container_right_main_input2_getCode{
      width: 200px;background-color: transparent;
      border-radius: 0px 8px 8px 0px;font-size: 14px;
      display: flex;justify-content: center;align-items: center;
    }
    .canClick{
      color: rgba(57, 125, 255, 1);
    }
    .login_container_right_main_input2_separate{
      height: 20px;
      width: 1px;
      background-color: rgba(206, 206, 206, 1)
    }
  }

  .button_class{
    display: flex;justify-content: flex-end;
  }

  /deep/ .el-form{
    .el-form-item{
      width: 100%;
      display: flex;
      margin-right: 0;
      .el-form-item__label{
        width: 120px !important;
      }
      .el-form-item__content{
        flex: 1;
      }
    }

  }

}
.main_main{
  padding-left: 20px;
  padding-right: 20px;
}
</style>
